<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'
	import {
		navigateBack
	} from "@/assets/scripts/navigate.js"
	import {
		lookListApi,
		getUserlistApi,
	} from "@/assets/api/other/memorialRecord.js"
	const pageCurrent = ref(0)
	const meMemorialId = ref('')

	const lookList = ref([])
	const memorieList = ref([])

	onMounted(() => {
		route_init()
		lookList_init()
		memorieList_init()
	})

	const route_init = async () => {
		const route = useRoute()
		if (route.query.meMemorialId && route.query.meMemorialId !== 'undefined') {
			meMemorialId.value = route.query.meMemorialId
		}
		if (route.query.pageCurrent && route.query.pageCurrent !== 'undefined') {
			pageCurrent.value = route.query.pageCurrent
		}
	}

	const lookList_init = async () => {
		const res = await lookListApi(meMemorialId.value)
		if (res.code === 200) {
			console.log(res);
			lookList.value = res.rows
		}
	}

	const memorieList_init = async () => {
		const res = await getUserlistApi(meMemorialId.value)
		if (res.code === 200) {
			memorieList.value = res.rows
		}
	}
</script>

<template>
	<view class="">
		<uv-navbar :fixed="false" bgColor="rgba(255,255,255,0.8)" @leftClick="navigateBack">
			<template #center>
				<uv-row class="inp-search">
					<uv-col>
						缅怀人数
					</uv-col>
				</uv-row>
			</template>
		</uv-navbar>
		<view class="bg"></view>
		<view class="tab-list">
			<view :class="['item',{'con':pageCurrent==0}]" @click="pageCurrent=0">
				缅怀值
			</view>
			<view :class="['item',{'con':pageCurrent==1}]" @click="pageCurrent=1">
				访问数
			</view>
		</view>
		<view class="tab-content" v-show="pageCurrent == 0">
			<view class="item" v-for="(item, index) in memorieList" :key="index">
				<view class="index">{{index+1}}</view>
				<uv-avatar :src="item.sysUser.avatar" size="50"></uv-avatar>
				<view class="ml-normal">
					<view class="">
						{{item.sysUser.nickName}}
					</view>
					<view class="d-flex">
						<view class="">
							缅怀值：
						</view>
						<view class="color-red ml-small">
							{{item.ocNum}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tab-content" v-show="pageCurrent == 1">
			<view class="item" v-for="(item, index) in lookList" :key="index">
				<view class="index">{{index+1}}</view>
				<uv-avatar :src="item.avatar" size="50"></uv-avatar>
				<view class="ml-normal">
					<view class="">
						{{item.name}}
					</view>
					<view class="d-flex">
						<view class="">
							来访数：
						</view>
						<view class="color-red ml-small">
							{{item.num}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.bg {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: -1;
		background: url(@/assets/pic/memorialRecord-bg.png) no-repeat;
		background-size: 100% 100%;
	}

	.tab-list {
		height: 40px;
		width: 80%;
		border-radius: 20px;
		border: 1px solid #fff;
		margin: 20px auto;
		display: flex;
		overflow: hidden;

		.item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			height: 40px;

			&.con {
				background-color: #ffffff;
				color: #ff5a00;
			}
		}
	}

	.tab-content {
		border-radius: 10px;
		background-color: #fff;
		margin: 0 15px;
		padding: 0 15px;

		.item {
			padding: 20px 0;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e5e5e5;

			.index {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 28px;
				height: 28px;
				border-radius: 50%;
				background-color: #0cb269;
				color: #fff;
				margin-right: 15px;
			}

			.color-red {
				color: red;
			}
		}
	}
</style>